<template>
    <div class="section_common">

        <div class="main">
            <el-form label-width="100px" >
                <el-form-item label="计划类型" required>
                    <el-select v-model="planType" :filterable="true" size="mini" @change="selectPlanType" placeholder="请选择">
                        <el-option value="周计划" ></el-option>
                        <el-option value="月度计划"></el-option>
                        <el-option value="季度计划"></el-option>
                        <el-option value="半年度计划"></el-option>
                        <el-option value="年度计划"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="培训目的"  required>
                    <el-input type="textarea" v-model="trainPurpose" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="培训类别" required>
                    <el-select v-model="trainType" :filterable="true" size="mini" placeholder="请选择">
                        <el-option value="公共培训" ></el-option>
                        <el-option value="部门内部培训"></el-option>
                        <el-option value="外训"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="培训讲师" required >
                    <el-select
                            v-model="trainTeacher"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入关键词"
                            @focus="tt"
                            :remote-method="remoteMethod"
                            :loading="loading">
                        <el-option v-for="(item,index) in trainTeachers" :key="index"  :label="item.userName" :value="item.userName" ></el-option>
                    </el-select>
                    <!--<el-select v-model="trainTeacher" :filterable="true" size="mini" @change="selectTrainTeacher" placeholder="请选择">
                        <el-option v-for="(item,index) in trainTeachers" :key="index"  :label="item" :value="item" ></el-option>
                    </el-select>-->
                </el-form-item>
                <el-form-item label="培训预算申请" required>
                    <el-input type="number" v-model="trainBudget" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="附件模板" required>
                    <a href="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/11/06/1636170475868.xlsx">培训计划安排模板.xlsx</a>
                </el-form-item>
                <el-form-item label="附件" required>
                    <!--<el-upload
                      action="#"
                      class="upload-demo"
                      :on-change="handleChange"
                      :file-list="fileList"
                      :multiple="false"
                      :limit="1"
                      list-type
                    >
                      <el-button size="mini" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip"></div>
                    </el-upload>-->
                    <input id="file" class="file-upload-input" ref="inputer" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="afterRead()">
                </el-form-item>

                <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
                    <van-step v-show="oneShow">
                        <h3>审批人：</h3>
                        <van-image v-for="(item,index) in oneLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="twoShow">
                        <van-image v-for="(item,index) in twoLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="threeShow">
                        <van-image v-for="(item,index) in threeLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="fourShow">
                        <van-image v-for="(item,index) in fourLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>

                    <van-step v-show="csShow">
                        <h3>抄送人：</h3>
                        <van-image v-for="(item,index) in csLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                </van-steps>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="submitForm()"
                    >提交
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {Image as VanImage,Toast} from "vant";
    import Vue from "vue";
    Vue.use(VanImage);

    export default {
        data() {
            return {
                loading: false,
                active: -1,
                oneShow:false,//审批是否显示
                oneLd:[],
                twoShow:false,
                twoLd:[],
                threeShow:false,
                threeLd:[],
                fourShow:false,
                fourLd:[],
                csShow:false,
                csLd:[],

                planType: '',
                trainPurpose:'',
                trainType: '',
                trainTeacher: '',
                trainTeachers:[],
                trainBudget: '',
                list: [],
                flag:false,

                sendTrainPlanUrl: "/mobiles/sendTrainPlanUrl", //提交申请Url
                type: this.$route.params.type,
                nowUser: JSON.parse(localStorage.getItem('userInfo')).userId,
                fileList: [{fileId:""}],
                fileName:"",
                fileUrl:"",
            }
        },
        created() {
            //1 培训专员做年度计划上级 ，2 其他人上级
            //根据地区获取页面审批人(默认是2)
            this.selSpLeaderByNowUser(2);
            //判断是否是培训专员
            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            if (userInfo.roleId.indexOf('1428543702766260226') !== -1){
                this.flag = true;
            }

            //获取培训讲师列表
            this.getTrainTeacherList();
        },
        methods: {
            selectPlanType(value){
                console.log(value)
                if (this.flag && value === '年度计划'){
                    this.selSpLeaderByNowUser(1);
                }else {
                    this.selSpLeaderByNowUser(2);
                }

            },
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;

                    setTimeout(() => {
                        this.loading = false;
                        this.trainTeachers = this.list.filter(item => {
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.trainTeachers = [];
                }
            },
            getTrainTeacherList(){
                this.$https.get('/mobiles/getTrainTeacherList' ).then((res)=>{
                    console.log(res)
                    if (res.data.code === 200) {
                        for (var i = 0; i < res.data.data.length; i++) {
                            let obj = {}
                            obj.userName = res.data.data[i].userName
                            obj.id = res.data.data[i].id
                            this.list.push(obj)
                        }
                    }

                }).catch(err => {
                    console.log(err);
                })
            },
            tt () {
                this.trainTeachers = this.list
                console.log(this.trainTeachers)
            },
            //根据申请人的id找到对应的审批人
            selSpLeaderByNowUser(type){
                this.$https.post('/mobiles/getTrainPlanSpLeader', {
                    nowUser:this.nowUser,
                    type:type
                }).then((res)=>{
                    console.log(res)

                    if (res.data.data.csspusers.length>0){
                        this.csShow=true;
                        this.csLd=res.data.data.csspusers;
                    }else {
                        this.csShow=false;
                        this.csLd=[];
                    }
                    if (res.data.data.onespusers.length>0){
                        this.oneShow=true;
                        this.oneLd=res.data.data.onespusers;
                    }else {
                        this.oneShow=false;
                        this.oneLd=[];
                    }
                    if (res.data.data.twospusers.length>0){
                        this.twoShow=true;
                        this.twoLd=res.data.data.twospusers;
                    }else {
                        this.twoShow=false;
                        this.twoLd=[];
                    }
                    if (res.data.data.threespusers.length>0){
                        this.threeShow=true;
                        this.threeLd=res.data.data.threespusers;
                    }else {
                        this.threeShow=false;
                        this.threeLd=[];
                    }
                    if (res.data.data.fourspusers.length>0){
                        this.fourShow=true;
                        this.fourLd=res.data.data.fourspusers;
                    }else {
                        this.fourShow=false;
                        this.fourLd=[];
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            //提交
            submitForm() {
                if (!this.isNull()) return false;
                this.$https.post(this.sendTrainPlanUrl, {
                        applyUser: this.nowUser, //申请用户
                        planType: this.planType,
                        trainPurpose: this.trainPurpose,
                        trainType: this.trainType,
                        trainTeacher: this.trainTeacher,
                        trainBudget: this.trainBudget,
                        fileId:this.fileList[this.fileList.length-1].fileId,
                        type: this.flag === true ? "1" : "2"
                    }).then(res => {
                    if (res.data.code == 200) {
                        this.$router.go(-1)
                        Toast("申请成功！");
                    } else if (res.data.code == 500) {
                        Toast(res.data.message);
                    }
                }).catch(err => {
                    console.log(err);
                })

            },
            go() {
                this.$router.go(-1)
            },
            //监听上传变动
            afterRead() {
                let formData = new FormData();
                var fs=this.$refs.inputer.files;
                for (let i = 0; i < fs.length; i++) {
                    formData.append("fileList", fs[i]);  //文件上传处理
                }
                this.$https.post('/mobiles/uploadFile',formData,{
                    timeout: 0, //无超时时间
                    headers: { "Content-Type": "multipart/form-data" }
                }).then(res => {
                    console.log(res)
                    this.fileList=res.data.data;
                    this.fileName=this.fileList[this.fileList.length-1].fileName;
                    this.fileUrl=this.fileList[this.fileList.length-1].filePath;
                    Toast("上传完成");
                }).catch(err => {
                    console.log(err);
                })
            },
            //判断相关数据是否为空
            isNull() {
                if (this.planType === '') {
                    this.$toast("请选择计划类型");
                    return false;
                }
                if (this.trainPurpose === '') {
                    this.$toast("请输入培训目的");
                    return false;
                }
                if (this.trainType==='') {
                    this.$toast("请选择培训类别");
                    return false;
                }
                if (this.trainTeacher==='') {
                    this.$toast("请选择培训讲师");
                    return false;
                }
                if (this.trainBudget==='') {
                    this.$toast("请选择培训预算");
                    return false;
                }
                if (this.fileList[this.fileList.length-1].fileId === '' || this.fileList[this.fileList.length-1].fileId == null){
                    this.$toast("请上传附件");
                    return false;
                }
                return true;
            },
        },
    };
</script>

<style lang="scss" scoped>
    .main {
        background-color: white;

        .el-form {
            padding-right: 10px;

            .el-form-item {
                .el-form-item__label {
                    line-height: 16px;
                }

                margin-bottom: 20px;
            }
        }
    }
</style>
